<template>
 <h1>
   emp
 </h1>

  <input type="text" placeholder="姓名" v-model="emp.name">
  <input type="text" v-model="emp.age">
  <input type="text" v-model="emp.job">
  <button @click="add">添加</button>


  <table>
    <tr>
      <th>编号</th>
      <th>姓名</th>
      <th>年龄</th>
      <th>职位</th>
    </tr>
    <tr v-for="(index,item) in arr">
        <td>{{index+1}}</td>
        <td>{{item.name}}</td>
        <td>{{item.age}}</td>
        <td>{{item.job}}</td>
    </tr>
  </table>

</template>
<script setup>
import {ref} from "vue";
const emp = ref({
  name : '',
  age : '',
  job : ''
})


const arr = []

const add = ()=>
{
  if (emp.value.name.trim()=='' || emp.value.age.trim()=='' || emp.value.job.trim()=='')
  {
    alert("WDNMD")
    return;
  }
  arr.value.push(emp)
  emp.value = {name:'',age:'',job:''}

}



</script>


<style scoped>

</style>